<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" id="divisionAdd" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form " action="" lay-filter="info" style="width: 400px;margin-top: 10px">
            <input name="id" hidden/>
            <div class="layui-form-item">
                <label class="layui-form-label">区划编号</label>
                <div class="layui-input-block">
                    <input type="divisionNo" name="divisionNo" placeholder="请输入区划编号" autocomplete="off"
                           class="layui-input" lay-verify="required|region" required>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区划名称</label>
                <div class="layui-input-block">
                    <input type="name" name="name" placeholder="请输入区划名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label ">上级区划名称</div>
                <div class="layui-input-block">
                    <input type="pidName" name="pidName" placeholder="请选择上级区划名称" autocomplete="off" class="layui-input"
                           readonly="readonly" style="background:#eeeeee!important">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input id="status" type="status" name="status" hidden/>
                    <select class="layui-select" lay-filter="select-status">
                        <option value="1">正常</option>
                        <option value="0">弃用</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                    <button type="submit" class="layui-btn" id="btn_cancel">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="table_div">
    <div id="searchParam" shiro:hasPermission="sys:role:list">
        <div class="layui-form-item" style="margin-top: 0.7%">
            <div class="layui-input-inline">
                <input type="text" id="key" class="layui-input" autocomplete="off" placeholder="请输入">
            </div>

            <div class="layui-input-inline ">
                <button class="layui-btn" onclick="search()" id="search" style="width: 60px; height: 35px">查询</button>
            </div>
        </div>
    </div>
</div>

<div class="dept-table">
    <table class="layui-table" id="showTable" lay-filter="showTable"></table>
</div>
<div id="ogTree" style="display: none"></div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="sysDivision:add">添加</button>
    </div>
</script>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="sysDivision:update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="sysDivision:delete">删除</a>
</script>

</body>
</html>
<script src="../layui/layui.all.js"></script>
<script src="../js/core.util.js"></script>
<script th:inline="none">
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var form = layui.form;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
    var element = layui.element;
    //尝试树
    var treetable;
    var selectNode = {};
    layui.config({
        base: '../layui-ext/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['treetable', 'table', 'tree'], function () {
        treetable = layui.treetable;
        var table = layui.table;
        var tree = layui.tree;
        var layer = layui.layer;
        var renderTable = function (data) {
            treetable.render({
                //渲染表格
                data: data,
                treeColIndex: 0,//树形图表显示在第一列
                treeSpid: '0',//第一级pid
                treeIdName: 'id',//id字段的名称
                treePidName: 'pid',//pid字段的名称
                treeDefaultClose: true,//默认折叠
                treeLinkage: false,//展开是默认展开所有子项
                elem: '#showTable',
                page: true,
                toolbar: '#toolbar',
                cols: [
                    [
                        {field: 'name', title: '区划名称', align: "left"},
                        {field: 'divisionNo', title: '区划编号', align: "center"},
                        {
                            field: 'pidName', title: '上级区划名称', templet: function (item) {
                                if (item.pidName === null || item.pidName === undefined) {
                                    return "省级区划";
                                } else {
                                    return item.pidName;
                                }
                            }, align: "center"
                        },
                        {field: 'updateTime', title: '更新时间', align: "center"},
                        {title: '操作', width: 120, toolbar: "#tool", align: "center"}
                    ]
                ],
            });
        };
        // 添加表单验证方法
        form.verify({
            region: [/^[\S]{6,6}$/, '行政区划编码必须6位，且不能出现空格']
        });
        var reloadTreeTable = function () {
            CoreUtil.sendGet("/sysDivisions", null, function (res) {
                renderTable(res.data);
            });
        };
        reloadTreeTable();
        //表头工具
        table.on('toolbar(showTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'batchDeleted':
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要批量删除的列");
                    } else {
                        var ids = [];
                        $(data).each(function (index, item) {
                            ids.push(item.id);
                        });
                        tipDialog(ids);
                    }
                    break;
                case 'add':
                    $(".operation input[name=id]").val("");
                    $(".operation input[name=divisionNo]").val("");
                    $(".operation input[name=name]").val("");
                    $(".operation input[name=pid]").val("");
                    $(".operation input[name=status]").val("");
                    $(".operation input[name=relationCode]").val("");
                    $(".operation input[name=deptManagerId]").val("");
                    $(".operation input[name=managerName]").val("");
                    $(".operation input[name=phone]").val("");
                    $(".operation input[name=createTime]").val("");
                    $(".operation input[name=updateTime]").val("");
                    $(".operation input[name=deleted]").val("");
                    //捕获页
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-lan',
                        title: "添加信息",
                        shadeClose: true,
                        area: ['500px', '400px'],
                        shade: 0.6,
                        maxmin: false,
                        anim: 1,
                        content: $('#divisionAdd'),
                        cancel: function () {
                        },
                    });
                    form.render();//更新全部
                    initTree("");
                    break;
            }
            ;
        });
        //列操作
        table.on('tool(showTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    var ids = [];
                    ids.push(data.id);
                    tipDialog(ids);
                    break;
                case 'edit':
                    $(".operation input[name=id]").val(data.id);
                    $(".operation input[name=divisionNo]").val(data.divisionNo);
                    $(".operation input[name=name]").val(data.name);
                    $(".operation input[name=pid]").val(data.pid);
                    $(".operation input[name=relationCode]").val(data.relationCode);
                    $(".operation input[name=status]").val(data.status);
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-lan',
                        title: "编辑信息",
                        shadeClose: true,
                        area: ['500px', '400px'],
                        shade: 0.6,
                        maxmin: false,
                        anim: 1,
                        content: $('#divisionAdd'),
                        cancel: function () {
                        },
                    });
                    form.render();//更新全部
                    initTree(data.id);
                    break;
            }
        });
        $("#btn_cancel").click(function () {
            $(".dept-table").show();
            $(".operation").hide();
            layer.closeAll();
            return false;
        });
        $(".operation input[name=pidName]").click(function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-lan',
                title: "选择上级区划名称",
                area: ['400px', '350px'],
                shade: 0,
                shadeClose: false,
                content: jQuery("#ogTree"),
                btn: ['确定', '取消'],
                yes: function (index) {
                    if (selectNode.data != null) {
                        //选中回显
                        $(".operation input[name=pid]").val(selectNode.data.id);
                        $(".operation input[name=pidName]").val(selectNode.data.title);
                    }

                    layer.close(index);
                }
            });
        });
        var loadOGTress = function (data) {
            tree.render({
                elem: '#ogTree',
                data: data,
                onlyIconControl: true,
                click: function (obj) {
                    selectNode = obj;
                    layer.msg(JSON.stringify(selectNode.data.title))
                }
            });
        };
        var initTree = function (id) {
            var param = {ogId: id}
            CoreUtil.sendGet("/sysDivision/tree", param, function (res) {
                loadOGTress(res.data);
            })
        }
        //删除
        var tipDialog = function (ids) {
            layer.open({
                content: "确定要删除么?",
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendDelete("/sysDivision/delete", ids, function (res) {
                        layer.msg(res.msg, {time: 1000}, function () {
                            search();
                        });
                    });
                }
            });
        };
        form.on('select(select-pid)', function (data) {
            $("#pid").val(data.value);
        });

        form.on('select(select-status)', function (data) {
            $("#status").val(data.value);
        });
        //监听保存
        form.on('submit(submit)', function (data) {
            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendPost("/addSysDivision", data.field, function (res) {
                    reloadTreeTable();
                    $(".dept-table").show();
                    layer.msg('添加成功', {time: 1000},)
                    $(".operation").hide();
                    layer.closeAll();
                    search();
                });
            } else {
                CoreUtil.sendPost("/updateSysDivision", data.field, function (res) {
                    reloadTreeTable();
                    $(".dept-table").show();
                    layer.msg('修改成功', {time: 1000},)
                    $(".operation").hide();
                    layer.closeAll();
                    search();
                });
            }

            return false;
        });

        //执行查询
        function search() {
            //这里以搜索为例
            tableIns1.reload({
                //这里的搜索接口还没实现
                where: { //设定异步数据接口的额外参数，任意设
                    name: $("#key").val()
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        };
    });
</script>
